import { Input, Select, Tree, Button, message } from 'antd';
import React, { Fragment, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { filterAuth } from "../../config/leftMeum";
import { addAdminList, editAdminList } from "../../http/request";
import store from "../../store";

const { Option } = Select;


const treeData = filterAuth("*").map(item => {
    let newItem = {
        title: item.label,
        key: item.key
    }
    if (item.children) {
        newItem.children = item.children.map(text => {
            return {
                title: text.label,
                key: text.key
            }
        })
    }

    return newItem
})



const App = () => {
    //跳转
    const Navigate = useNavigate()
    //权限数据
    const [checkedKeys, setCheckedKeys] = useState([])
    //角色数据
    const [role, setRole] = useState("1")
    //用户名
    const userRef = useRef()
    //密码
    const passRef = useRef()
    //添加?修改?
    const [state, setState] = useState(store.getState())
    //全局状态数据更新
    store.subscribe(() => {
        setState(state => {
            return store.getState()
        })
    })
    const handleChange = (value) => {
        setRole(() => value)
    };
    const onCheck = (Keys, info) => {
        setCheckedKeys(() => Keys)
    };
    const onSumbit = () => {
        const data = {
            adminname: userRef.current.input.value,
            password: passRef.current.input.value,
            role,
            checkedKeys
        }
        const bool = Object.values(data).every(item => {
            if (Object.prototype.toString.call(item) == '[object Array]' && item.length == 0) {
                return false
            } else {
                return item
            }
        })
        if (bool) {
            switch (state.types) {
                case "添加":
                    addAdminList(data).then(res => {
                        // console.log(res);
                        const { code } = res.data
                        if (code == "200") {
                            message.success("添加成功")
                            Navigate("/account/adminlist")
                        } else {
                            message.error("添加失败")
                        }
                    })
                    break;
                case "修改":
                    editAdminList(data).then(res => {
                        // console.log(res);
                        const { code } = res.data
                        if (code == "200") {
                            message.success("修改成功")
                            Navigate("/account/adminlist")
                        } else {
                            message.error("修改失败")
                        }
                    })
                    break;
            }
        } else {
            message.error("至少每样都写一种")
        }
    }
    return (
        <Fragment>
            用户名: <Input size="large" placeholder="请输入账号" ref={userRef} />
            密码:<Input size="large" placeholder="请输入密码" ref={passRef} />
            角色:
            <Select defaultValue="超管" style={{ width: 120 }} onChange={handleChange}>
                <Option value="1">超管</Option>
                <Option value="2">管理员</Option>
                <Option value="3">员工</Option>
            </Select>
            <br />
            权限:
            <Tree
                checkable
                onCheck={onCheck}
                treeData={treeData}
            />
            <Button onClick={onSumbit}>{state.types}</Button>
        </Fragment>
    )

}


export default App;